<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie ie9" lang="en" class="no-js"> <![endif]-->
<!--[if !(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->

<head>
	<title>On-Top Navigation | KingAdmin - Admin Dashboard</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
	<meta name="author" content="The Develovers">
	<!-- CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/main.css" rel="stylesheet" type="text/css">
	<link href="assets/css/my-custom-styles.css" rel="stylesheet" type="text/css">
	<!--[if lte IE 9]>
		<link href="assets/css/main-ie.css" rel="stylesheet" type="text/css"/>
		<link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css"/>
	<![endif]-->
	<!-- CSS for demo style switcher. you can remove this -->
	<link href="demo-style-switcher/assets/css/style-switcher.css" rel="stylesheet" type="text/css">
	<!-- Fav and touch icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
	<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
	<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>

<body class="ontop-nav topnav-fixed ">
	<!-- WRAPPER -->
	<div id="wrapper" class="wrapper">
		<!-- TOP BAR -->
		<div class="top-bar navbar-fixed-top">
			<div class="container">
				<div class="clearfix">
					<!-- navbar-toggle -->
					<button type="button" class="btn btn-default navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse" aria-expanded="false">
						<i class="fa fa-bars"></i>
					</button>
					<!-- end navbar-toggle -->
					<!-- logo -->
					<div class="pull-left logo">
						<a href="index.html"><img src="assets/img/kingadmin-logo-white.png" alt="KingAdmin - Admin Dashboard" /></a>
						<h1 class="sr-only">KingAdmin Admin Dashboard</h1>
					</div>
					<!-- end logo -->
					<div class="collapse navbar-collapse" id="main-navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="dropdown">
								<a href="layout-ontop-navigation.html#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-dashboard fa-fw"></i>Dashboard <i class="fa fa-caret-down"></i></a>
								<ul class="dropdown-menu">
									<li><a href="index.html">Dashboard v1</a></li>
									<li><a href="index-dashboard-v2.html">Dashboard v2</a></li>
									<li><a href="index-dashboard-v3.html">Dashboard v3</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="layout-ontop-navigation.html#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-navicon"></i> Navigations <span class="badge element-bg-color-blue">New</span> <i class="fa fa-caret-down"></i></a>
								<ul class="dropdown-menu">
									<li><a href="nav-default-fixed.html">Default Fixed Sidebar</a></li>
									<li><a href="nav-normal.html">Normal Sidebar</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="layout-ontop-navigation.html#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-columns"></i> Layouts <span class="badge element-bg-color-blue">New</span> <i class="fa fa-caret-down"></i></a>
								<ul class="dropdown-menu">
									<li><a href="layout-collapsed.html">Collapsed Sidebar</a></li>
									<li><a href="layout-minified.html">Minified Sidebar</a></li>
									<li><a href="layout-ontop-navigation.html" class="active">On-Top Navigation</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="layout-ontop-navigation.html#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-clipboard fa-fw"></i>Pages <i class="fa fa-caret-down"></i></a>
								<ul class="dropdown-menu">
									<li><a href="page-profile.html">Profile</a></li>
									<li><a href="page-invoice.html">Invoice</a></li>
									<li><a href="page-knowledgebase.html">Knowledgebase</a></li>
									<li><a href="page-new-message.html">New Message</a></li>
									<li><a href="page-view-message.html">View Message</a></li>
									<li><a href="page-search-result.html">Search Result</a></li>
									<li><a href="page-submit-ticket.html">Submit Ticket</a></li>
									<li><a href="page-faq.html">FAQ</a></li>
								</ul>
							</li>
							<li>
								<a href="page-inbox.html"><i class="fa fa-envelope-o"></i> Inbox <span class="badge red-bg">32</span></a>
							</li>
							<li>
								<a href="index.html"><i class="fa fa-reply"></i> Back to Main Page</a>
							</li>
							<li class="dropdown">
								<a href="layout-ontop-navigation.html#" class="dropdown-toggle" data-toggle="dropdown">
									<img src="assets/img/user-avatar.png" alt="User Avatar" />
									<span class="name">Stacy Rose</span> <span class="caret"></span>
								</a>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="layout-ontop-navigation.html#">
											<i class="fa fa-user"></i>
											<span class="text">Profile</span>
										</a>
									</li>
									<li>
										<a href="layout-ontop-navigation.html#">
											<i class="fa fa-cog"></i>
											<span class="text">Settings</span>
										</a>
									</li>
									<li>
										<a href="layout-ontop-navigation.html#">
											<i class="fa fa-power-off"></i>
											<span class="text">Logout</span>
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- /container -->
		</div>
		<!-- END TOP BAR -->
		<!-- MAIN CONTENT WRAPPER -->
		<div id="main-content-wrapper" class="content-wrapper expanded-full">
			<!-- top general alert -->
			<div class="alert alert-danger top-general-alert">
				<span>If you <strong>can't see the logo</strong> on the top left, please reset the style on right style switcher (for upgraded theme only).</span>
				<button type="button" class="close">&times;</button>
			</div>
			<!-- end top general alert -->
			<div class="row">
				<div class="col-lg-4 ">
					<ul class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="layout-ontop-navigation.html#">Home</a></li>
						<li><a href="layout-ontop-navigation.html#">Layouts</a></li>
						<li class="active">On-Top Navigation</li>
					</ul>
				</div>
				<div class="col-lg-8 ">
					<div class="top-content">
						<ul class="list-inline quick-access">
							<li>
								<a href="charts-statistics-interactive.html">
									<div class="quick-access-item bg-color-green">
										<i class="fa fa-bar-chart-o"></i>
										<h5>CHARTS</h5><em>basic, interactive, real-time</em>
									</div>
								</a>
							</li>
							<li>
								<a href="page-inbox.html">
									<div class="quick-access-item bg-color-blue">
										<i class="fa fa-envelope"></i>
										<h5>INBOX</h5><em>inbox with gmail style</em>
									</div>
								</a>
							</li>
							<li>
								<a href="tables-dynamic-table.html">
									<div class="quick-access-item bg-color-orange">
										<i class="fa fa-table"></i>
										<h5>DYNAMIC TABLE</h5><em>tons of features and interactivity</em>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- main -->
			<div class="content">
				<div class="main-header">
					<h2>On-Top Navigation</h2>
					<em>initially collapsed menu sidebar</em>
				</div>
				<div class="main-content">
					<div class="text-center bottom-60px">
						<img src="assets/img/dashboard-ontop-nav.png" class="img-responsive center-block" alt="On-Top Navigation">
						<div class="bottom-30px"></div>
						<p class="lead">This is an example of page with top navigation</p>
						<p><i class="fa fa-info-circle"></i> Suitable for dashboard with few top-level menu items. <a href="index.html">Back to Main Page</a></p>
					</div>
					<h3 class="text-center bottom-30px">Other Layouts</h3>
					<div class="row">
						<div class="col-md-6 text-center">
							<a href="layout-minified.html"><img src="assets/img/dashboard-minified-sidebar.png" class="img-responsive center-block" alt="Minified Sidebar"></a>
							<br>
							<a href="layout-minified.html" class="btn btn-primary">Minified Left Sidebar</a>
						</div>
						<div class="col-md-6 text-center">
							<a href="layout-minified.html"><img src="assets/img/dashboard-collapsed-sidebar.png" class="img-responsive center-block" alt="Collapsed Sidebar"></a>
							<br>
							<a href="http://demo.thedevelovers.com/dashboard/kingadmin-v1.6.1/collapsed-minified.html" class="btn btn-primary">Collapsed Left Sidebar</a>
						</div>
					</div>
				</div>
			</div>
			<!-- /main -->
			<!-- FOOTER -->
			<footer class="footer">
				&copy; 2016 The Develovers
			</footer>
			<!-- END FOOTER -->
		</div>
		<!-- END CONTENT WRAPPER -->
	</div>
	<!-- END WRAPPER -->
	<!-- STYLE SWITCHER -->
	<div class="del-style-switcher">
		<div class="del-switcher-toggle toggle-hide"></div>
		<form>
			<section class="del-section del-section-skin">
				<h5 class="del-switcher-header">Choose Skins:</h5>
				<ul>
					<li><a href="layout-ontop-navigation.html#" title="Slate Gray" class="switch-skin slategray" data-skin="assets/css/skins/slategray.css">Slate Gray</a></li>
					<li><a href="layout-ontop-navigation.html#" title="Dark Blue" class="switch-skin darkblue" data-skin="assets/css/skins/darkblue.css">Dark Blue</a></li>
					<li><a href="layout-ontop-navigation.html#" title="Dark Brown" class="switch-skin darkbrown" data-skin="assets/css/skins/darkbrown.css">Dark Brown</a></li>
					<li><a href="layout-ontop-navigation.html#" title="Light Green" class="switch-skin lightgreen" data-skin="assets/css/skins/lightgreen.css">Light Green</a></li>
					<li><a href="layout-ontop-navigation.html#" title="Orange" class="switch-skin orange" data-skin="assets/css/skins/orange.css">Orange</a></li>
					<li><a href="layout-ontop-navigation.html#" title="Red" class="switch-skin red" data-skin="assets/css/skins/red.css">Red</a></li>
					<li><a href="layout-ontop-navigation.html#" title="Teal" class="switch-skin teal" data-skin="assets/css/skins/teal.css">Teal</a></li>
					<li><a href="layout-ontop-navigation.html#" title="Yellow" class="switch-skin yellow" data-skin="assets/css/skins/yellow.css">Yellow</a></li>
				</ul>
				<div id="transparent-control"></div>
				<button type="button" class="switch-skin-full fulldark" data-skin="assets/css/skins/fulldark.css">Full Dark</button>
				<button type="button" class="switch-skin-full fullbright" data-skin="assets/css/skins/fullbright.css">Full Bright</button>
			</section>
			<p><a href="layout-ontop-navigation.html#" title="Reset Style" class="del-reset-style">Reset Style</a></p>
		</form>
		<script type="text/javascript">
		var currentFilename = window.location.pathname.split('/').pop();
		if (currentFilename == '') currentFilename = 'index.html';

		var arrHasTransparent = ['index.html', 'index-dashboard-v2.html', 'charts-statistics-interactive.html', 'charts-statistics-real-time.html',
			'charts-statistics.html', 'components-maps.html', 'components-tree-view.html', 'page-file-manager.html'
		];

		var hasTransparent = false;

		arrHasTransparent.forEach(function(filename) {
			if (filename == currentFilename) {
				hasTransparent = true;
				return;
			}
		});

		if (hasTransparent) {
			document.getElementById("transparent-control").innerHTML = '<p><em>There is specific transparent version for this page, check <span class="important">&larr; left</span> navigation menu</em></p><br>';
		} else {
			document.getElementById("transparent-control").innerHTML = '<button type="button" class="switch-skin-full transparent" data-skin="assets/css/skins/transparent.css">Transparent</button>';
		}
		</script>
	</div>
	<!-- END STYLE SWITCHER -->
	<!-- Javascript -->
	<script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
	<script src="assets/js/bootstrap/bootstrap.js"></script>
	<script src="assets/js/plugins/modernizr/modernizr.js"></script>
	<script src="assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js"></script>
	<script src="assets/js/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/js/king-common.js"></script>
	<script src="demo-style-switcher/assets/js/deliswitch.js"></script>
</body>

</html>
